import React from 'react';
import * as icons from '@ant-design/icons';
import { Tooltip } from 'antd';

interface IconProps {
  icon: string;
  style?: React.CSSProperties;
  className?: string;
  rotate?: number;
  spin?: boolean;
  twoToneColor?: string;
  // eslint-disable-next-line no-unused-vars
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  // eslint-disable-next-line no-unused-vars
  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
  tooltip?: string;
}

const Icon: React.FC<IconProps> = ({ icon, tooltip, ...other }) => {
  const antIcon: { [key: string]: any } = icons;

  // Configure using iconfont
  const IconFont = antIcon.createFromIconfontCN({
    scriptUrl: ['//at.alicdn.com/t/c/font_3768834_cw0u9nc2cm4.js'],
  });

  const resolveIconfont = icon.indexOf('icon-') !== -1;

  const renderIcon = () => {
    if (resolveIconfont) {
      return <IconFont type={icon} {...other} />;
    }
    return React.createElement(antIcon[icon], {
      ...other,
    });
  };

  return tooltip ? (
    <Tooltip title={tooltip}>
      <span>{renderIcon()}</span>
    </Tooltip>
  ) : (
    <>{renderIcon()}</>
  );
};

export default Icon;
